<ng-template #template>
  <div class="svc-item-value-wrapper" (pointerdown)="adorner.onPointerDown($event)"
    [attr.data-sv-drop-target-item-value]="adorner.isDraggable ? item.value : null"
    [ngClass]="{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}"
    #container>
    <div class="svc-item-value__ghost"></div>
    <div class="svc-item-value-controls">
      <span *ngIf="adorner.isDraggable" class="svc-item-value-controls__button svc-item-value-controls__drag">
        <svg class="svc-item-value-controls__drag-icon" [iconName]="'icon-drag-24x24'" [size]="'auto'"
          [attr.title]="adorner.dragTooltip" sv-ng-svg-icon></svg>
      </span>
      <span *ngIf="adorner.allowAdd" class="svc-item-value-controls__button svc-item-value-controls__add" [key2click]
        (click)="adorner.add(adorner)" role="button" [attr.aria-label]="adorner.tooltip"><svg [iconName]="'icon-add_16x16'" [size]="'auto'"
          [attr.title]="adorner.tooltip" sv-ng-svg-icon></svg></span>
      <span *ngIf="adorner.allowRemove" class="svc-item-value-controls__button svc-item-value-controls__remove"
        [key2click] (click)="adorner.remove(adorner)" (blur)="onBlur($event)" role="button" [attr.aria-label]="adorner.tooltip"><svg
          [iconName]="'icon-remove_16x16'" [size]="'auto'" [attr.title]="adorner.tooltip" sv-ng-svg-icon></svg></span>
    </div>

    <div class="svc-item-value__item" (click)="adorner.select(adorner, $event)">
      <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
    </div>

    <div *ngIf="adorner.canShowPanel()" class="svc-item-value-controls svc-choice-elements-button-container">
        <span
            role="button"
            class="svc-item-value-controls__button svc-item-value-controls__add svc-choice-elements-button"
            (click)="adorner.togglePanel()"
            [key2click]
          >
          <svg
            [iconName]="adorner.showPanel ? 'icon-collapsepanel-16x16' : 'icon-expandpanel-16x16'" 
            [size]="'auto'" 
            sv-ng-svg-icon>
          </svg>
        </span>
    </div>
  </div>
  <ng-template *ngIf="adorner.showPanel"
          [component]="{ name: getPanelComponentName(item.panel), data: getPanelComponentData(item.panel) }"></ng-template>
</ng-template>